<template>
  <div class="my-page">
    <div class="my-title">
      <img ref="myPicture" src="http://liufusong.top:8080/img/profile/bg.png" alt />
      <div class="my-info" ref="user">
        <div class="my-avatar">
          <img ref="userLogo" src="http://liufusong.top:8080/img/profile/avatar.png" alt />
        </div>
        <p v-if="!Mytoken">游客</p>
        <p v-if="Mytoken">{{nickName}}</p>
        <span @click="goLogin" v-if="!Mytoken">去登录</span>
        <span @click="outLogin" v-if="Mytoken" class="back">退出</span>
        <div class="userinfo" v-if="Mytoken">
          <p class="binaji">编辑个人资料</p>
          <van-icon name="play" size="12" color="#999" class="sanjiao" />
        </div>
      </div>
    </div>
    <div class="content">
      <van-grid :column-num="3" :border="false">
        <van-grid-item icon="star-o" text="我的收藏" @click="myFavorate" />
        <van-grid-item icon="wap-home-o" text="我的出租" @click="myRent" />
        <van-grid-item icon="clock-o" text="看房记录" />
        <van-grid-item icon="notes-o" text="成为房主" />
        <van-grid-item icon="user-o" text="个人资料" />
        <van-grid-item icon="service-o" text="联系我们" />
      </van-grid>
    </div>
    <div class="ad">
      <img src="http://liufusong.top:8080/img/profile/join.png" alt />
    </div>
  </div>
</template>

<script>
import { myinfoApi } from '@/api/my'
import { getItem, key, removeItem } from '@/utils/storage'
import { Dialog } from 'vant'
export default {
  props: {},
  data() {
    return {
      isShow: false,
      message: {},
      Mytoken: '',
      nickName: '',
    }
  },
  computed: {},
  created() {
    this.myLogin()
  },
  mounted() {},
  watch: {
    Mytoken: {
      immediate: true,
      deep: true,
      handler(val) {
        this.Mytoken = val
      },
    },
  },
  methods: {
    myLoginOut() {
      this.$refs.user.style.height = '165px'
      this.$refs.myPicture.src = 'http://liufusong.top:8080/img/profile/bg.png'
    },
    goLogin() {
      this.$router.push('/login')
    },
    myLogin() {
      this.$nextTick(async () => {
        const token = getItem(key)
        this.Mytoken = token
        if (this.Mytoken) {
          try {
            const res = await myinfoApi()
            // console.log(res)
            this.message = res.body
            this.$refs.user.style.height = '210px'
            this.$refs.myPicture.src =
              'http://liufusong.top:8080' + this.message.avatar
            this.nickName = this.message.nickname
            this.isShow = true
          } catch (err) {
            console.log(err)
          }
        }
      })
    },
    myFavorate() {
      //  const token = getItem(key)
      if (this.Mytoken) {
        this.$router.push('/favorate')
      } else {
        this.$router.push('/login')
      }
    },
    myRent() {
      //  const token = getItem(key)
      if (this.Mytoken) {
        this.$router.push('/rent')
      } else {
        this.$router.push('/login')
      }
    },
    outLogin() {
      Dialog.confirm({
        title: '提示',
        message: '是否确定退出？',
      })
        .then(() => {
          // on confirm
          removeItem(key)
          this.$router.push(
            '/layout/my',
            () => {},
            () => {}
          )

          this.Mytoken = ''
          this.myLoginOut()
        })
        .catch(() => {
          // on cancel
        })
    },
  },
  components: {},
}
</script>

<style scoped lang="less">
.my-page {
  .my-title {
    position: relative;
    min-height: 300px;
    img {
      width: 100%;
    }
    .my-info {
      position: absolute;
      left: 50%;
      bottom: 0;
      width: 318px;
      height: 165px;
      transform: translateX(-50%);
      background-color: #fff;
      box-shadow: 0 0 10px 3px #ddd;
      display: flex;
      flex-direction: column;
      align-items: center;
      .my-avatar {
        transform: translateY(-50%);
        width: 70px;
        height: 70px;
        border-radius: 50%;
        box-sizing: border-box;
        border: 5px solid #f5f5f5;
        box-shadow: 0 0 2px 2px #ddd;
        img {
          width: 100%;
        }
      }
      p {
        font-size: 13px;
        color: #333;
        transform: translateY(-30px);
      }
      span {
        display: block;
        font-size: 13px;
        color: #fff;
        width: 65px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        border-radius: 5px;
        transform: translateY(-25px);
        background-color: #21b97a;
      }
      .back {
        height: 25px;
        border-radius: 20px;
        margin-top: -8px;
      }
    }
  }
  .userinfo {
    margin-top: 20px;
    display: flex;
    .binaji {
      font-size: 12px !important;
      color: #999 !important;
    }
    .sanjiao {
      transform: translateY(-14px);
    }
  }
  .content {
    margin-top: 8px;
  }
  .ad {
    height: 85px;
    width: 100px;
    margin-top: 10px;
    padding: 0 14px;
    img {
      height: 100%;
    }
  }
}
</style>
<style lang="less" >
.van-dialog {
  width: 270px;
  font-size: 18px;
  color: black;
  border-radius: 10px;
  .van-dialog__message--has-title {
    color: #888;
    font-size: 15px;
  }
  .van-dialog__confirm{
    color: #108ee9;
    font-size: 18px;
  }
}
</style>

